<template>
	<block v-if="list && list.length > 0">
		<view class="wrap">
			<view v-show="!isList" :style="{ padding: padding }">
				<slot name="waterfall" :list="list" :pageSize="pageSize" :isList="isList" :extData="extData" :refreshed="refreshed"></slot>
			</view>
			<view v-show="isList">
				<block v-if="customForeachList"><slot name="list" :list="list" :isList="isList" :extData="extData" :refreshed="refreshed"></slot></block>
				<block v-else>
					<block v-for="(entity, index) in list" :key="index">
						<slot name="item" :entity="entity" :index="index" :isList="isList" :extData="extData" :refreshed="refreshed"></slot>
					</block>
				</block>
			</view>
			<tui-nomore v-if="!morePage" text="已经到最底了" :backgroundColor="moreBgColor"></tui-nomore>
			<block v-if="!customLoadmore && !isLoadFirstPage">
				<block v-if="(loadStatus == 'nomore' && page >= 1) || loadStatus != 'nomore'">
					<view v-if="morePage && list && list.length >= showMoreSize" style="padding: 30rpx 20rpx;" :style="{ backgroundColor: moreBgColor }">
						<u-loadmore :status="loadStatus" @loadmore="loadMore" :color="loadMoreColor" font-size="24rpx"></u-loadmore>
					</view>
				</block>
			</block>
		</view>
	</block>
</template>

<script>
export default {
	props: {
		moreBgColor: {
			type: String,
			default: '#00000000'
		},
		loadMoreColor: {
			type: String,
			default: '#999999'
		},
		showMoreSize: {
			type: Number,
			default: 10
		},
		padding: {
			type: String,
			default: '0 10rpx'
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		refreshed: {
			type: Boolean,
			default: true
		},
		isList: {
			type: Boolean,
			default: false
		},
		morePage: {
			type: Boolean,
			default: false
		},
		pageSize: {
			type: Number,
			default: 10
		},
		autoLoad: {
			type: Boolean,
			default: true
		},
		customLoadmore: {
			type: Boolean,
			default: false
		},
		extData: {
			type: [Array, Object, String, Number, Boolean],
			default() {
				return null;
			}
		},
		customForeachList: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			loadStatus: 'loadmore',
			page: 0,
			isLoadFirstPage: true
		};
	},
	mounted() {
		if (this.autoLoad) {
			this.loadMore();
		}
	},
	methods: {
		refresh() {
			const vm = this;

			vm.page = 1;
			vm.loadStatus = 'loading';
			vm.isLoadFirstPage = true;

			vm.$nextTick(function() {
				vm.$emit('loading', vm.page, vm.pageSize);
			});
		},
		loadMore() {
			const vm = this;

			if (vm.loadStatus == 'nomore') {
				return;
			}

			if (vm.page < 1 || !vm.list || vm.list.length <= 0) {
				vm.loadStatus = 'loadmore';
				return;
			}

			vm.page = vm.page + 1;
			vm.loadStatus = 'loading';

			vm.$nextTick(function() {
				vm.$emit('loading', vm.page, vm.pageSize);
			});
		},
		more() {
			const vm = this;
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh();
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh();
			// #endif
			vm.loadStatus = 'loadmore';
			setTimeout(() => {
				vm.isLoadFirstPage = false;
			}, 100);
		},
		nomore() {
			const vm = this;
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh();
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh();
			// #endif
			vm.loadStatus = 'nomore';
			setTimeout(() => {
				vm.isLoadFirstPage = false;
			}, 100);
		},
		loadError() {
			const vm = this;
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh();
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh();
			// #endif
			vm.loadStatus = 'loadmore';
			setTimeout(() => {
				vm.isLoadFirstPage = false;
			}, 100);
			vm.page = vm.page - 1;
		}
	}
};
</script>
